<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.1/jquery.rateyo.min.css"
    />

    <meta
      name="viewport"
      content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <title>jQuery formBuilder/formRender Demo</title>
  </head>

  <body>
    <header class="demo-header">
      <label for="toggleBootstrap">Toggle Bootstrap <input type="checkbox" id="toggleBootstrap"/></label>
      <div>
        dataType:
        <label>XML <input type="radio" name="demo-dataType" value="xml" class="demo-dataType"/></label
        ><label>JSON <input type="radio" name="demo-dataType" value="json" class="demo-dataType"/></label>
      </div>
      <div>
        Language:
        <select id="setLanguage">
          <% _.forEach(htmlWebpackPlugin.options.langFiles, function(langFile) { %>
          <option value="<%- langFile.locale %>"><%- langFile.nativeName %></option>
          <% }); %>
        </select>
      </div>
    </header>
    <div class="content">
      <h1 class="formbuilder-title">
        jQuery formBuilder -
        <button class="editForm">Render</button>
      </h1>
      <h1 class="formrender-title">
        jQuery formRender -
        <button class="editForm">Edit</button>
      </h1>
      <div class="build-wrap"></div>
      <form class="render-wrap"></form>
      <div class="action-buttons formbuilder-actions">
        <h2>Actions</h2>
        <table id="action-api" class="api-table"></table>
        <div id="toggleEdit">
          <button class="trigger">Toggle Field Edit</button>
          <input type="text" placeholder="current field id" class="current-field-id" />
        </div>
        <div id="removeField">
          <button class="trigger">Remove Field</button>
          <input type="text" placeholder="current field id" class="current-field-id" />
        </div>
        <div id="setData">
          <button class="trigger">Set Form Data</button>
          <textarea id="set-form-data-value">
            [
              {
                "type": "text",
                "label": "Full Name",
                "subtype": "text",
                "className": "form-control",
                "name": "text-1476748004559"
              },
              {
                "type": "select",
                "label": "Occupation",
                "className": "form-control",
                "name": "select-1476748006618",
                "values": [
                  {
                    "label": "Street Sweeper",
                    "value": "option-1",
                    "selected": true
                  },
                  {
                    "label": "Moth Man",
                    "value": "option-2"
                  },
                  {
                    "label": "Chemist",
                    "value": "option-3"
                  }
                ]
              },
              {
                "type": "textarea",
                "label": "Short Bio",
                "rows": "5",
                "className": "form-control",
                "name": "textarea-1476748007461"
              }
            ]</textarea
          >
        </div>
      </div>
      <div class="action-buttons formrender-actions">
        <h2>Actions</h2>
        <button id="loadUserForm" type="button">Load User Form</button>
        <button id="showUserData" type="button">Show User Data</button>
        <button id="renderUserForm" type="button">Render User Form</button>
        <button id="getHTML" type="button">Get HTML</button>
        <button id="clearUserForm" type="button">Clear Form</button>
        <button id="testSubmit" type="submit">Test Submit</button>
      </div>
    </div>
    <div id="formbuilder-options"></div>
    <script src="assets/js/vendor.js"></script>

    <script src="<%= htmlWebpackPlugin.options.formBuilder %>"></script>
    <script src="<%= htmlWebpackPlugin.options.formRender %>"></script>
    <script src="<%= htmlWebpackPlugin.options.demo %>"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.1/jquery.rateyo.min.js"></script>
  </body>
</html>
